<template>
	<!-- 规格-模态层弹窗 -->
	<view 
		class="popup spec" 
		:class="value?'':'none'"
		@click="closePop"
	>
		<!-- 遮罩层规格尺寸 -->
		<view class="mask"></view>
		<view class="layer attr-content" @click.stop="stopPrevent">
			<view v-if="title" class="title">{{title}}</view>
			<view v-if="showClose" @click="closePop" class="iconfont icon-close"></view>
			<slot>
			</slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: "uni-msg",
		//属性
		props: {
			value:{
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: "" // title 为空时根据 type ，显示"操作成功"/"操作失败"
			},
			type: {
				type: String, // success or error
				default: "" // 默认值
			},
			showClose: {
				type: Boolean,
				default: false // 是否显示右上角关闭按钮
			},
			cancelText: {
				type: String,
				default: "取消"
			},
			confirmText: {
				type: String,
				default: "确认"
			}
		},
		methods: {
			onConfirm(){
				this.$emit("onConfirm", '');
			},
			closePop(){
				this.$emit("input", false);
			}
		}
	}
</script>

<style lang="scss">
/*  弹出层 */
.popup {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  
  &.show {
    display: block;
    .mask{
      animation: showPopup 0.2s linear both;
    }
    .layer {
      animation: showLayer 0.2s linear both;
    }
  }
  &.hide {
    .mask{
      animation: hidePopup 0.2s linear both;
    }
    .layer {
      animation: hideLayer 0.2s linear both;
    }
  }
  &.none {
    display: none;
  }
  .mask{
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.4);
  }
  .layer {
    position: fixed;
    z-index: 99;
    bottom: 0;
    width: 100%;
    min-height: 40vh;
    border-radius: 10upx 10upx 0 0;
    background-color: #fff;
    .btn{
      height: 66upx;
      line-height: 66upx;
      border-radius: 100upx;
      background: $uni-color-primary;
      font-size: $font-base + 2upx;
      color: #fff;
      margin: 30upx auto 20upx;
    }
  }
  @keyframes showPopup {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes hidePopup {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes showLayer {
    0% {
      transform: translateY(120%);
    }
    100% {
      transform: translateY(0%);
    }
  }
  @keyframes hideLayer {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(120%);
    }
  }
}
.icon-close{
	font-size: 44upx;
	position: absolute;
	top: 40upx;
	right:38upx;
	color: #555555;
}
.title{
	text-align: center;
	font-size: 32upx;
	font-weight: bold;
	padding-top: 44upx;
}
</style>
